<script setup lang="ts">
import Navbarheader from '@/components/userNavbar-header.vue'
import { ref, watch } from 'vue'
import { useUserStore } from '@/stores/user'
import http from '@/http'

// 引入 Element Plus 相关组件和图标
import { ElMessage, ElNotification, ElDivider, ElButton } from 'element-plus'

// 引入 v-md-editor 编辑器及其主题
import VMdEditor from '@kangc/v-md-editor'
import '@kangc/v-md-editor/lib/style/base-editor.css'
import githubTheme from '@kangc/v-md-editor/lib/theme/github.js'
import '@kangc/v-md-editor/lib/theme/style/github.css'

// 引入 v-md-editor 的代码高亮库
import hljs from 'highlight.js'

VMdEditor.use(githubTheme, {
  Hljs: hljs,
})

const userStore = useUserStore()
const loading = ref(false)

// mode: 'view' | 'edit'
// 控制是显示简历内容，还是显示编辑器
const mode = ref('view')
const markdownContent = ref('') // 用于双向绑定编辑器的内容

// 获取简历内容的函数
const fetchResumeContent = async (articleId: number) => {
  loading.value = true
  try {
    const content: any = await http.get<string>(`/api/articles/${articleId}/content`)
    markdownContent.value = content
    mode.value = 'view' // 获取到内容后，切换到预览模式
  } catch (error) {
    console.error('获取简历内容失败:', error)
  } finally {
    loading.value = false
  }
}

// 监听 userStore 中的 resumeArticleId
watch(
  () => userStore.resumeArticleId,
  (newId) => {
    if (newId) {
      fetchResumeContent(newId)
    } else {
      mode.value = 'edit' // 如果没有简历，直接进入编辑模式
      markdownContent.value = '# 在这里开始编写您的简历' // 给个默认内容
    }
  },
  { immediate: true },
)

// --- 图片上传处理逻辑 ---
const handleUploadImage = async (event: Event, insertImage: Function, files: FileList) => {
  // 核心修正：使用传统的 for 循环，这是处理 FileList 最可靠的方式
  for (let i = 0; i < files.length; i++) {
    const file = files[i] // 通过索引安全地获取文件

    // 检查文件大小
    const isLt2M = file.size / 1024 / 1024 < 20
    if (!isLt2M) {
      ElMessage.error(`图片 '${file.name}' 的大小超过 20MB，已跳过上传!`)
      continue // 跳过这个文件，继续处理下一个
    }

    const formData = new FormData()
    formData.append('file', file)

    try {
      // 对每个文件都独立调用一次上传接口
      const imageUrl = await http.post<string>('/api/files/upload', formData)

      // 每成功上传一张，就将其插入到编辑器中
      insertImage({
        url: imageUrl,
        desc: file.name,
      })
    } catch (error) {
      console.error('图片上传失败:', error)
      ElMessage.error(`图片 "${file.name}" 上传失败，请重试`)
    }
  }
}
// --- 保存简历的逻辑 ---
const saveResume = async () => {
  loading.value = true
  try {
    // 调用新的后端接口，将编辑器内的全部 Markdown 内容提交
    await http.post('/api/users/me/resume-content', {
      markdownContent: markdownContent.value,
    })
    // 保存成功后，重新获取用户信息，这会更新 resumeArticleId 并触发 watch
    await userStore.fetchUserInfo()
    ElNotification.success('简历保存成功！')
  } catch (error) {
    console.error('简历保存失败:', error)
    ElNotification.error('简历保存失败，请重试')
  } finally {
    loading.value = false
  }
}
</script>

<template>
  <Navbarheader />
  <div class="common-layout">
    <el-main class="resume-main">
      <el-card v-loading="loading" shadow="never" class="resume-card">
        <template v-if="userStore.token">
          <div v-if="mode === 'view'" class="content-wrapper">
            <v-md-editor :model-value="markdownContent" mode="preview" />
            <el-divider />
            <el-button type="primary" @click="mode = 'edit'">编辑简历</el-button>
          </div>

          <div v-else class="content-wrapper">
            <v-md-editor
              v-model="markdownContent"
              height="600px"
              :disabled-menus="[]"
              @upload-image="handleUploadImage"
            />
            <el-divider />
            <el-button type="success" @click="saveResume">保存简历</el-button>
            <el-button v-if="userStore.resumeArticleId" @click="mode = 'view'">取消编辑</el-button>
          </div>
        </template>

        <template v-else>
          <el-empty description="请先登录以编辑或查看简历" />
        </template>
      </el-card>
    </el-main>
  </div>
</template>

<style scoped>
.common-layout {
  display: flex;
  justify-content: center;
}
.resume-main {
  margin-top: 2rem;
  width: 100%;
  max-width: 960px;
}
.resume-card {
  padding: 1rem;
}
.content-wrapper {
  width: 100%;
}
:deep(.github-markdown-body) {
  padding: 0;
}

/* --- 新增：移動端適配 --- */
@media (max-width: 768px) {
  .resume-main {
    margin-top: 1rem;
    padding: 0 10px;
  }
  .resume-card {
    padding: 0.5rem;
  }
  .markdown-body {
    font-size: 14px;
  }
}
</style>
